<!--
 * @Author: wuyuanhong wuyuanhong@szhbzc.com
 * @Date: 2024-09-11 17:58:30
 * @LastEditors: wuyuanhong wuyuanhong@szhbzc.com
 * @LastEditTime: 2024-09-14 10:57:59
 * @FilePath: \xiamenAgency\src\cuview-ui\components\cus-drawer\cus-drawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <Drawer :title="title" :closable="closable" v-model="drawValue" :width="width" :maskClosable="maskClosable"
        :placement="placement" @on-close="onClose" @on-visible-change="onVisibleChange" :styles="styles">
        <slot name="default" v-if="drawValue"></slot>
        <div class="demo-drawer-footer" v-if="showFooter">
            <slot name="footer">
                <Button style="margin-right: 8px" @click="onCancel">{{ cancelText }}</Button>
                <Button type="primary" @click="onConfirm">{{ submitText }}</Button>
            </slot>
        </div>
    </Drawer>
</template>
<script>
export default {
    name: "cus-drawer",
    props: {
        title: {
            type: [String,],
            default: '',
        },
        width: {
            type: [String, Number],
            default: '80%',
        },
        closable: {
            type: Boolean,
            default: true,
        },
        maskClosable: {
            type: Boolean,
            default: true,
        },
        placement: {
            type: [String],
            default: 'right',
        },
        cancelText: {
            type: [String],
            default: '取消',
        },
        submitText: {
            type: [String],
            default: '确认',
        },
        showFooter: {
            type: [Boolean],
            default: false,
        },
    },
    data() {
        return {
            drawValue: false,
            styles: {
                height: `calc(100% - ${(this.showFooter?53:0) +(this.title?51:0)}px)`,
                overflow: 'auto',
                position: 'static',
            },
        };
    },
    methods: {
        show() {
            this.drawValue = true;
        },
        onCancel() {
            this.drawValue = false;
            this.$emit('onClose');
        },
        onClose() {
            this.$emit('onClose');
        },
        onVisibleChange() {
            this.$emit('onVisibleChange');
        },
        onConfirm() {
            this.$emit('onConfirm');
        }
    },
}
</script>
<style lang="scss" scoped>
.demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
} 
/* 隐藏drawer内部滚动条，同时仍可滚动 */
::v-deep .ivu-drawer-body {
  overflow: auto;
  scrollbar-width: none; /* 针对Firefox */
}
 
::v-deep .ivu-drawer-body::-webkit-scrollbar {
  display: none; /* 针对Chrome, Safari和Opera */
}
</style>